<template>
  <div>
    <div v-if="courseInfo.CourseDesc || courseInfo.TeacherName">
      <div class="intro-course">
        <span class="info-title-bold">
          课程<span class="info-title">
            介绍
          </span>
        </span>
        <!-- eslint-disable vue/no-v-html -->
        <VHtml
          v-if="courseInfo.CourseDesc"
          tag="div"
          class="info-content"
          :html="courseInfo.CourseDesc"
        />
        <div
          v-else
          class="no-text"
        >
          暂无课程介绍
        </div>
      </div>
      <div class="intro-course-teacher">
        <span class="info-title-bold">
          讲师<span class="info-title">
            介绍
          </span>
        </span>
        <div
          v-if="courseInfo.TeacherName"
          class="intro-teacher"
        >
          <Avatar
            class="teacher-head"
            :src="courseInfo.TeacherImg"
          />
          <div>
            <h2 class="name">
              {{ courseInfo.TeacherName }}
            </h2>
          </div>
          <!-- eslint-disable vue/no-v-html -->
          <VHtml
            tag="div"
            class="info-content"
            :html="courseInfo.TeacherDesc"
          />
        </div>
        <div
          v-else
          class="no-text"
        >
          暂无讲师介绍
        </div>
      </div>
    </div>
    <div
      v-else
      class="no-section"
    >
      <NoData>暂无相关介绍</NoData>
    </div>
  </div>
</template>

<script lang='ts'>
import Vue from 'vue'
export default Vue.extend({
  components: {
    NoData: () => import('components/Class/NoData.vue'),
    VHtml: () => import('components/VHtml.vue'),
    Avatar: () => import(/* webpackChunkName: "publicComp" */ 'components/Mine/Avatar.vue'),
  },
  // eslint-disable-next-line vue/require-default-prop
  // eslint-disable-next-line vue/require-prop-types
  props: ['courseInfo'],
  data () {
    return {}
  },
  methods: {},
})
</script>

<style lang='scss' scoped>
.introdece-wrapper {
  min-height: 100%;
}
.intro-course {
  padding: 30px 24px;
}
.intro-course-teacher {
  padding: 30px 24px;
  border-top: 20px solid #F6F6F6;
}
.info-title, .info-title-bold {
  display: flex;
  font-size: 32px;
  color: #333;
  font-weight: 600;
}
.info-title {
  font-weight: 400;
}
.info-content {
  width: 100%;
  margin-top: 30px;
  font-size: 28px;
  color: #4B515E;
  line-height: 48px;
  text-align: left;
}
.intro-teacher {
  text-align: center;
}
.teacher-head {
  margin-top: 10px;
  width: 86px;
  height: 86px;
}
.name {
  font-size: 28px;
  display: block;
  color: #333;
  margin-top: 10px;
}
.no-section {
  font-size: 32px;
  padding-top: 100px;
  text-align: center;
}
.no-text {
  font-size: 32px;
  padding: 30px 0;
  text-align: center;
}
</style>
